<template > 
    <div class="menuBox">
        <div class="w1200">
            <!-- 导航 -->
            <div class="navs">
				<div class="nav">
					<div class="label">
						课程分类：
					</div>
					<div class="items">
						<div @click="activeClick('projectid',item.config_id,'getXmlistChild',item,1)" :class="{active: projectid == item.config_id}" class="item" v-for="(item,index) in xmlist" :key="index">
							<span>{{item.name}}</span>
						</div>
					</div>
				</div>
				<div class="nav" v-if="xmlistChild&&xmlistChild.length>0">
					<div class="label">
						栏目：
					</div>
					<div class="items">
						<div class="item" @click="activeClick('projectid0',item.config_id,'getXmlistChild',item,2)" :class="{active: projectid0 == item.config_id}" v-for="(item,index) in xmlistChild" :key="index">
							<span>{{item.name}}</span>
						</div>
					</div>
				</div>
                <div class="nav" v-if="xmlistChildLevel2&&xmlistChildLevel2.length>0">
					<div class="label">
						栏目：
					</div>
					<div class="items">
						<div class="item" @click="activeClick('projectid1',item.config_id,type=='course'?'getClasslist':'getMajorlist',item,3)" :class="{active: projectid1 == item.config_id}" v-for="(item,index) in xmlistChildLevel2" :key="index">
							<span>{{item.name}}</span>
						</div>
					</div>
				</div>
				<div class="nav" v-if="majorlist&&majorlist.length>0">
					<div class="label">
						科目：
					</div>
					<div class="items">
						<div class="item" @click="activeClick('majorid',item.config_id,'getTestpaperList',item)" :class="{active:majorid == item.config_id}" v-for="(item,index) in majorlist" :key="index">
							<span>{{item.name}}</span>
						</div>
					</div>
				</div>
                <div class="nav" v-if="majorlist&&majorlist.length>0">
					<div class="label">
						试卷类型：
					</div>
					<div class="items">
						<div class="item" @click="activeClick('testpaperTypeId',item.config_id,'getTestpaperList',item)" :class="{active: testpaperTypeId == item.config_id}" v-for="(item,index) in testpaper" :key="index">
							<span>{{item.name}}</span>
						</div>
					</div>
				</div>
			</div>
            <div class="videos" v-if="type != 'subjectBank'">
				<div class="video" v-for="(item,idx) in classlist" :key="idx" @click = "toPage(item.goods_id,'courseDetails','id')">
					<img class="bj" :src="item[contentKeys['pic']]" > </img>
					<div class="title">
						{{item[contentKeys['title']]}}
					</div>
                    <!-- 试听 -->
					<div v-if="type == 'audition'" @click="item.is_sy==2?toPay(item):''" :class="item.is_sy==2?'btn':'activeBtn'" >
						点击试听
					</div>
                    <!-- 课程 -->
                    <div class="goodsBtm" v-if="type == 'course'">
                        <div class="beStudy">
                            <p>{{ item.type }}</p>	
                            <p>￥{{ item.price }}</p>
                        </div>
                    </div>

				</div>
			</div>
			<!-- 题库 -->
			<div class="tkCon" v-if="type == 'subjectBank'&&testpaperList&&testpaperList.length>0">
        	<div class="util_con">
        		<div class="tkConList con_list">
					<div class="tkFlex" v-for="(it,idx) in testpaperList" :key="idx">
						<p>{{ it.name }}</p><span>{{ it.num }}题</span>
						<a  @click = "startToLearn(it,0)">开始做题</a>
				</div>
                            
		        </div>
        	</div>
      	</div>


        </div>
       
			
    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
    export default {
        name: "menuBox",
        mixins: [pagePublic],
        props:{
            contengUrl:{
                type:Object,
                default:()=>{
                    return {}
                }
            },
            contentKeys:{
                type:Object,
                default:()=>{
                    return {
                        title: "name",
                        pic:"image"

                    }
                }
            },
            type:{
                type:String,
                default:''
            }

        },
        data(){
            return{
                xmlist:[],//课程分类列表
				xmlistChild:[],//课程分类列表子级
                xmlistChildLevel2:[],
				majorlist:[],//栏目列表
				defaultData:{},//当前选中对课程分类对象
				classlist:[],//课程列表
                testpaper:[],// 试卷类型
                testpaperList:[],// 试卷类型
				projectid:'',//课程分类id
				projectid0:'',//课程分类子级id
				projectid1:'',//课程分类子级id
				majorid:'',//栏目id
                testpaperTypeId:'', //试卷id
                testpaperId:'', //试卷id
				pages:{
					page:1,
					size:20,
					total:0,
				},
                level:0,
                // urls:{
                //     list: {
                //         url:this.$api.tem.list,
                //         method:"get",
                //         sync:false,
                //     },
                //     add:this.$api.tem.add,
                //     edit:this.$api.tem.edit,
                //     del:this.$api.tem.del
                // },

                
            }
        },
        computed: {
            ...mapState(['configInfo']),

        },
        created() {
            this.getXmlistChild(0)
            console.log(this.type,'createdtype')
            if(this.type == 'subjectBank'){
                this.getTestpaper()
            }
        },
        methods:{
            ...mapMutations(['set_configInfo']),
            // 获取试卷类型
            getTestpaper(){
                this.$api.getTestpaper().then(res=>{
                    this.testpaper = res.data||[]
                    if(res.data&&res.data.length>0){
                        this.testpaperTypeId = res.data[0].config_id
                    }
                })
            },
            getTestpaperList(){
                this.$api.getTestpaperList({
                    limit:99,
                    page:1,
                    project:this.projectid1,
                    subject:this.majorid,
                    type:this.testpaperTypeId,
                }).then(res=>{
                    this.testpaperList = res.data.data||[]
                    if(res.data&&res.data.data&&res.data.data.length>0){
                        this.testpaperId = res.data.data[0].testpaper_id
                    }
                })
            },
            // 获取课程分类列表
			getXmlist(){
                this.$api.home.config()
				uni.request({
					url:this.$http+'trialclass/xmlist',
					method:'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', // 设置请求头
					},
					success: (res) => {
						console.log(res.data)
						this.xmlist = res.data.data||[]
						if(res.data.data&&res.data.data.length>0){
							this.projectid = res.data.data[0].projectid
							if(res.data.data[0]&&res.data.data[0].child){
								this.defaultData = res.data.data[0]
								this.getXmlistChild()
							}else{
								this.getMajorlist()
							}
						}
					}
				})
			},
			// 获取课程分类列表子级
			getXmlistChild(pid){
                let params = {
                    pid:pid||pid == '0'?pid:this[this.level != 1? `projectid${parseInt(this.level) - 2}`:'projectid'],
                    limit:20,
                    page:1
                }
                this.$api.home.config(params).then(res=>{
                    console.log(res,'98176567890765')
                    if(res.status==200){
                        if(pid == 0){
                            this.xmlist = res.data.data||[]
                            console.log(pid,this.xmlist,111111111)

                            if(res.data.data&&res.data.data.length>0){
                                this.defaultData = res.data.data[0]
                                this.projectid = res.data.data[0].config_id
                                this.level++
                                this.getXmlistChild(res.data.data[0].config_id)
                            }

                        }else{
                            if(this.level > 1){
                                this.xmlistChildLevel2 = res.data.data||[]
                                 console.log(pid,this.xmlistChildLevel2,333333333)
                                if(res.data.data&&res.data.data.length>0){
                                    this.projectid1 = res.data.data[0].config_id
                                    if(this.type == 'course'){
                                        this.getClasslist(res.data.data[0].config_id)
                                    }else if(this.type == 'subjectBank'){
                                        // 科目
                                        this.getMajorlist(res.data.data[0].config_id)
                                    }
                                }
                            }else if(this.level == 1){
                                this.xmlistChild = res.data.data||[]

                                console.log(pid,this.xmlistChildLevel2,2222222222)

                                if(res.data.data&&res.data.data.length>0){
                                    this.projectid0 = res.data.data[0].config_id
                                    this.level++
                                    this.getXmlistChild(res.data.data[0].config_id)
                                }
                            }
                            
                        }
                    }
                })
			},
			// 120/100/147/484/1/0?key=startAnswer
			// 0/0/   147    /204    /1/0     key=startStudy
			startToLearn(item,type) {
				this.$router.push({
					path:`/test/${item.time?item.time:120}/${item.score?item.score:100}/${item.num}/${item.testpaper_id}/${type==0?1:2}/${type}`,
					query:{
						logId:item.testpaperlog_id,
						key:"subjectBank",
					}
				});
				
				
			},
			// 获取栏目列表
			getMajorlist(pid){
				let that = this
                this.$api.getSubject({
                    pid:pid?pid:this[this.level != 1? `projectid${parseInt(this.level) - 2}`:'projectid']
                }).then(res=>{
                    console.log(res,'获取栏目列表98176567890765')
                    if(res.status==200){
                        that.majorlist = res.data||[]
                        if(res.data&&res.data.length>0){
                            that.majorid = res.data[0].config_id
                            if(this.type == 'subjectBank'){
                                that.getTestpaperList()

                            }else{
                                that.getClasslist()

                            }
                            this.$emit('subjectId',res.data[0].config_id)
                        }
                    }
                })
			},
			// 获取课程列表
			getClasslist(pid){
				let that = this
                this.$api.goodsList({
                    limit:99,
                    page:1,
                    project:pid||that.projectid1
                }).then(res=>{
                    console.log(res,'获取栏目列表98176567890765')
                    if(res.status==200){
                        that.classlist = res.data.data||[]
                    }
                })
			},
			activeClick(key,id,fun,item,level){
                this.classlist = []
                if(fun != 'getClasslist'&&fun != 'getTestpaperList'){
                    this.majorlist = []
                }
                // if(fun != 'getTestpaperList'){
                //     this.testpaper = []
                // }
				this[key] = id
				if(level == '0'){
                    this.level = 0
					this.defaultData = item
				}
                if(level){
                    this.level = level
                    if(this.type == 'couse'){
				        this[fun](id)
                    }else{
                        this[fun]()
                    }
                }else{
                    this[fun]()
                }
			},
			// toPay(item){
			// 	let that = this
			// 	// localStorage.setItem('xm_id',that.projectid0!=''?that.projectid0:that.projectid)
			// 	// this.$store.commit('upDate',{key:'kc_id',val:item.id})
			// 	// uni.navigateTo({
			// 	// 	url:'/pages/look/look'
			// 	// })
			// 	// window.location.href = `http://www.zhongchenjiaoyu.com/look/look/${item.id}/0`
				
			// 	window.location.href = `http://new.zhongchenjiaoyu.com/look/#/look/${item.id}/0`
			// 	// window.open(`http://www.zhongchenjiaoyu.com/look/look/${item.id}/0`)
			// 	// window.open(`http://localhost:8083/look/${item.id}/0`)
			// 	// window.location.href = `http://localhost:8083/look/${item.id}/0`
			// 	// window.open(`http://www.zhongchenjiaoyu.com/look/look/${item.id}/0`)
			// 	// window.location.href = "http://localhost:8080/xlweb/look/2737/0"
			// }
        }
    }
</script>
<style lang="scss" scoped>
.menuBox{
    width: 100%;
    height: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    .navs{
			display: flex;
			flex-direction: column;
			background-color: #fff;
			padding: 10px 20px;
			border-radius: 8px;
			
			.nav{
				display: flex;
				line-height: 28px;
				padding: 10px 0 0;
				align-items: center;
				.label{
					color: #818a92;
					width: 90px;
					margin-top: -5px;
					font-size: 17px;
				}
				.items{
					display: flex;
					flex-wrap: wrap;
					.item{
						// margin: 5px 0;
						margin-bottom: 4px;
						line-height: 38px;
						margin-right: 25px;
						border-radius: 3px;
						padding: 0 15px;
						color: #242930;
						background-color: #fff;
					}
					.active{
						color: var(--bg-color,'#FF6900');
						background-color: #f5f6f6;
					}
				}
			}
			
		}
        .videos{
			display: flex;
			flex-wrap: wrap;
			margin-top: 20px;
			width: 100%;
			padding-bottom: 50px;
			
			.video{
				width: calc(25% - 24px);
				margin: 0 32px 26px 0;
				box-sizing: border-box;
				border: 1px solid #fff;
				display: flex;
				flex-direction: column;
				background-color: #fff;
				.bj{
					width: 100%;
				}
				.title{
					box-sizing: border-box;
					line-height: 46px;
					padding: 0 12px;
					width: 100%;
					white-space: nowrap; /* 不换行 */
					overflow: hidden; /* 超出部分隐藏 */
					text-overflow: ellipsis; /* 使用省略号表示被隐藏的部分 */
					// cursor: pointer; /* 添加手型光标样式 */
					
				}
				.btn{
					width: 156px;
					height: 36px;
					line-height: 36px;
					background: var(--bg-color,'#FF6900');
					margin: 12px auto 20px;
					color: #fff;
					text-align: center;
					border-radius: 18px;
					font-size: 16px;
					cursor: pointer; /* 添加手型光标样式 */
				}
				.activeBtn{
					width: 156px;
					height: 36px;
					line-height: 36px;
					background: #ccc;
					margin: 12px auto 20px;
					color: #fff;
					text-align: center;
					border-radius: 18px;
					font-size: 16px;
					cursor: pointer; /* 添加手型光标样式 */
				}
				.btn:hover{
					background: var(--bg-color,'#FF6900');
				}
			}
			.video:nth-child(4n){
				margin: 0 0 26px 0;
			}
			
		}
.beStudy{padding: 8px 0; height: 24px; line-height: 24px; border-top: 1px solid #e3e3e3; font-size: 12px; text-align: center;}
.beStudy p{width: 49%; float: left; color: #999;}
.beStudy p i{color: #666; margin-left: 5px;}
.beStudy p:nth-child(1){border-right: 1px solid #e3e3e3;}
.beStudy p:nth-child(2){font-size: 16px; font-weight: bold; color: var(--bg-color,'#FF6900');}
/*题库*/
.tkCon{background: #fff; margin-top: 26px; border-radius: 6px; padding: 20px;}
.tkConList .tkFlex{display: flex; line-height: 46px;}
.tkConList .tkFlex p{width: 70%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
.tkConList .tkFlex span{width: 20%;text-indent: 2em;}
.tkConList .tkFlex a{margin: 8px 0; display: block; width: 88px; font-size: 13px; height: 28px; line-height: 28px; background: var(--bg-color,'#FF6900'); color: #fff; text-align: center; border-radius: 20px;}
.tkConList .tkFlex a:hover{opacity: .7;}
}
</style>